<template>
  <div class="wrapdiv">
    <el-row>
      <el-col>
        <el-button :style="{margin: '10px'}"  @click="addGroup" title="添加分组" circle="" type="primary" icon="el-icon-plus"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          ref="multipleTable"
          :data="groupInfoList"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{
            'background-color': 'rgba(0,0,0,.05)'
          }"
        >
          <el-table-column type="index" width="55"> </el-table-column>
          <el-table-column prop="name" label="名称" width="350">
          </el-table-column>

          <el-table-column prop="group_id" label="group_id" width="300">
          </el-table-column>
          <el-table-column prop="width" label="宽度"> </el-table-column>
          <el-table-column prop="height" label="高度"> </el-table-column>
          <el-table-column label="屏幕">
            <template slot-scope="scope">
              <i
                class="el-icon-edit"
                @click="editScreenOfGroup(scope.row)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <div>
                <i class="el-icon-setting" @click="edit_group(scope.row.id)"></i>
              </div> -->
              <el-tooltip
                content="修改分组信息"
                placement="left-start"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  :plain="true"
                  size="small"
                  icon="el-icon-edit"
                  @click="editGroup(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-button
                type="danger"
                :plain="false"
                size="small"
                icon="el-icon-delete"
                @click="deleteGroup(scope.row.group_id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-pagination class="mypagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <div>
      <Group_edit_dialog
        :dialogformvisible_edit.sync="dialogformvisible_edit"
        :is_add="is_add"
        :group_info="group_info"
      />
    </div>
    <!-- for select screens to group -->
    <!-- :group_id="cur_group_id" -->
    <div>
      <Group_edit_select_screen_dialog
        :dialogformvisible_edit_group_screen.sync="
          dialogformvisible_edit_group_screen
        "
        :group_info="group_info"
        :screensInGroup="screensInGroup"
      />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Group_edit_dialog from "../components/Group_edit_dialog.vue";
import Group_edit_select_screen_dialog from "@/components/Group_edit_select_screen_dialog";
export default {
  name: "Group",
  data() {
    return {
      dialogformvisible_edit: false,
      dialogformvisible_edit_group_screen: false,
      cur_group_id: null,
      is_add: false,
      group_info: {
        group_id: "",
        name: "组名字1",
        width: 256,
        height: 160,
      },
      total: 0,
      pageNum: 1,
      pageSize: 10,

      //分屏的  组列表 非全部
      groupInfoList: [],

      // 本组 的 屏列表, 传给 dialog
      screensInGroup: [],
    };
  },
  computed: {
    // ...mapState([
    //   'groupInfoList'
    // ])
  },
  watch: {
    dialogformvisible_edit(v, oldval) {
      console.log("dialogformvisible_edit==${v}");
      if (v == false) this.getGroupsByPage();
    },
    //显示编辑 组里的屏幕信息时, 获取包含的屏幕信息
    dialogformvisible_edit_group_screen(v, oldval) {
      if (v) {
        console.log('-----------------');
        this.getScreensOfGroup(this.cur_group_id);
        }
    },
  },
  components: {
    Group_edit_dialog,
    Group_edit_select_screen_dialog,
  },
  mounted() {
    this.getGroupsByPage();
  },
  methods: {
    // ...mapMutations([
    //   'setGroupList'
    // ]),

    //根据g_id 获取screen_ids
    async getScreensOfGroup(group_id) {
      let ret = await this.$http.get(`screens?group_id=${group_id}`);
      let { leds } = ret.data.data;
      console.log(leds);
      this.screensInGroup = leds;
    },

    editScreenOfGroup(group_info) {
      console.log('>>>>>>>', group_info.group_id);

      this.cur_group_id =group_info.group_id;
      this.group_info = group_info
      this.dialogformvisible_edit_group_screen = true;
    },
    async getGroupsByPage() {
      console.log("getGroupsByPage");
      let ret = await this.$http.get(
        `groupsByPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
      );
      let { total, pageNum, groups } = ret.data.data;
      this.total = total;
      this.pageNum = pageNum;
      console.log(groups);
      this.groupInfoList = groups;
    },
    addGroup() {
      this.is_add = true;
      this.dialogformvisible_edit = true;
      console.log("add group");
    },
    editGroup(group_info) {
      this.is_add = false;
      this.group_info = group_info;
      this.dialogformvisible_edit = true;
      console.log("eidt", group_info);
    },
    deleteGroup(group_id) {
      this.$confirm("确认删除分组？")
        .then(async (_) => {
          console.log("delete", group_id);
          //发起网络请求
          let ret = await this.$http.delete(`groups/${group_id}`);
          console.log(ret);
          let { action, result } = ret.data.data;
          console.log(action, result);
          if (result == "ok") this.$message.success("删除分组成功");
          else this.$message.error("删除分组失败");
          this.getGroupsByPage();
        })
        .catch((_) => {});
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getGroupsByPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getGroupsByPage();
    },

    onSubmit() {
      console.log(this.form_search);
    },
    onReset() {
      this.form_search.ip = "";
      this.form_search.screen_name = "";
      this.form_search.screen_type = "";
      this.form_search.screen_brand = "";
    },
  },
};
</script>

<style scoped>
  .wrapdiv{
    width: 98%;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 0 10px #aaa;
  }
  .mypagination{
    margin: 10px;
    border-radius: 5px;
    background-color: rgba(0,0,0,.01);
  }
</style>
